<template>
    <div class="container">
        <div class="wrap">
            <div class="flex-box-container item">
                <div>身份证正面:</div>
                <div @click="handle('id_card_front')">
                    <img :src="detail.id_card_front" alt="" style="width:100px;">
                </div>
            </div>
            <div class="flex-box-container item">
                <div>身份证反面:</div>
                <div @click="handle('id_card_back')">
                    <img :src="detail.id_card_back" alt="" style="width:100px;">
                </div>
            </div>
            <div class="flex-box-container item">
                <div>手持身份证照片:</div>
                <div @click="handle('id_card_in_hand')">
                    <img :src="detail.id_card_in_hand" alt="" style="width:100px;">
                </div>
            </div>
            <!--<div class="flex-box-container item">-->
                <!--<div>充值金额:</div>-->
                <!--<el-input v-model="value" placeholder="请输入充值金额" style="width: 150px;" v-if="detail.status == 0"></el-input>-->
                <!--<el-input v-model="detail.val" placeholder="请输入充值金额" style="width: 150px;" disabled v-else></el-input>-->
            <!--</div>-->
            <div class="flex-box-container item">
                <div>审核状态:</div>
                <div>
                    {{detail.status == 0 ? '用户已失效' : (detail.status == 1 ? '审核通过' : (detail.status == 2 ? '待审核' : (detail.status == 3? '审核不通过' : '')))}}
                </div>
            </div>
            <div v-if="detail.status == 2">
                <el-button  @click="handleVerify(1)" type="primary" size="small">审核通过</el-button>
                <el-button  @click="handleVerify(3)" type="danger" size="small">审核不通过</el-button>
            </div>

            <el-dialog title="信息图" :visible.sync="dialogVisible">
                <img :src="avatar" alt="" style="width: 400px;">
            </el-dialog>
        </div>
    </div>
</template>

<script>
	let CONSTANT = require('../constant/constant.js');
	let common = require("../common.js");
	import TableList from "./common/my-table";
	export default {
		data() {
			return {
				value: "",
				detail: "",
				dialogVisible: false,
                avatar : ""
			}
		},
		components: {
			'table-list': TableList
		},
		created(){

		},
		mounted() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				let  url = CONSTANT.URL.userDetail;
				common.requestGetAjax(url,{}, {user_id: this.$route.query.id},(res)=>{
					if(res.status == 0){
						this.detail = res.data
					}else{
						this.$message({
							message: res.msg,
							type: 'warning'
						});
					}
				})
			},
			handleVerify(status) {
				let  url = CONSTANT.URL.userVerify,
					param = {user_id: this.detail.id, status: status}
				common.requestAjax(url,param, {},(res)=>{
					if(res.status == 0){
						this.$message({
							type: 'success',
							message:status == 1 ? '审核通过' : (status == 3 ? '审核未通过' : '')
						});
						setTimeout( () => {
							this.$router.back()
						}, 1500)
					}else{
						this.$message({
							message: res.msg,
							type: 'warning'
						});
					}
				})
			},
			handleBig() {
				let img = this.detail.verified_image
				let html = '<img :src="img"/>'
				this.$alert(html, '信息图', {
					confirmButtonText: '确定',
					dangerouslyUseHTMLString: true,
					callback: action => {
						this.$message({
							type: 'info',
							message: `action: ${ action }`
						});
					}
				});
			},
            handle(img) {
				this.avatar = this.detail[img]
                this.dialogVisible = true
            }
		}
	}
</script>

<style lang="scss">
    .container {
        .wrap {
            .item {
                font-size: 15px;
                margin-bottom: 30px;
                div{
                    &:first-child {
                        width: 120px;
                    }
                }
            }
        }
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
                .el-input,.el-select{
                    width: 180px;
                }
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            .cell{
                button{
                    margin-top: 10px;
                }
            }
            video{
                width: 100px;height: auto;
            }
            img.video-img{
                width: 60px;height: 60px;
                cursor: pointer;
                border-radius: 30px;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{
            img{
                display: block;
                margin: 0 auto;
            }
        }
        .user-num{
            color:#409EFF;
            cursor: pointer;
        }

        .avatar{
            width: 50px!important;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }
    }
</style>
